<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--微信支付页</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css"/>
</head>

<body>

<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="top"></div>
<script type="text/javascript">$(".top").load("shortcut.html");</script>

<div class="cart py-container" id="payVm">
    <!--logoArea-->
    <div class="logoArea">
        <div class="fl logo"><span class="title">收银台</span></div>
    </div>
    <!--主内容-->

    <a href="payfail.html">支付失败演示页</a>
    <a href="paysuccess.html">支付成功演示页</a>


    <div class="checkout py-container  pay">
        <div class="checkout-tit">
            <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{order.orderId}}</span>
            </h4>
            <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{ly.formatPrice( order.actualPay)}}</em>元</span>
            <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
            <div class="fl weixin">微信支付</div>
            <div class="fl sao">
                <p class="red">二维码已过期，刷新页面重新获取二维码。</p>
                <div class="fl code">
                    <!-- 二维码 -->
                    <div id="qrcode"></div>
                    <!--<img src="img/erweima.png" alt="">-->
                    <div class="saosao">
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                </div>
                <div class="fl phone">

                </div>

            </div>
            <div class="clearfix"></div>
            <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
        </div>
    </div>

</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<!-- 生成二维码 -->
<script type="text/javascript" src="js/qrcode.min.js"></script>
<script type="text/javascript">
    var payVm = new Vue({
        el: "#payVm",
        data: {
            ly,
            order: {}, //订单信息
        },
        created() {
            ly.verifyUser().then(res => {

                //渲染订单信息
                this.order = ly.store.get("order");

                this.order.orderId = ly.getUrlParam("orderId");
                //获取支付链接地址
                ly.http.get("/order/order/url/" + this.order.orderId).then(({data}) => {
                    //resp resp.data ? {data} data
                    new QRCode(document.getElementById("qrcode"), {
                        text: data,
                        width: 128,
                        height: 128,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    //定时器查询支付状态
                    const taskId = setInterval(() => {
                        ly.http.get("order/order/state/" + this.order.orderId).then(res => {
                            let i = res.data;
                            if (i === 1) {
                                //支付成功,更改后台支付状态, 已付款未发货 2
                                // ly.http.put("/order/" + this.orderId + "/2");
                                clearInterval(taskId);
                                location.href = "/paysuccess.html";
                            } else if (i === 2) {

                                //支付失败,更改后台支付状态,未付款 1
                                // ly.http.put("/order/" + this.orderId + "/2");
                                clearInterval(taskId);
                                location.href = "/payfail.html";
                            }
                        }).catch()
                    }, 3000)

                })
            }).catch(() => {
                //未登录
                location.href = "/login.html?returnUrl = " + location.href;
            })


        }
    })

    $(function () {
        $("ul.payType li").click(function () {
            $(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
        })
    })
</script>
</body>

</html>